<template>
  <div>
    <el-input size="large" v-model="input" style="width: 90%;" placeholder="今天想做些什么呢?" clearable
      @keyup.enter="addTodo" /><el-button type="primary" :icon="Edit" circle @click="addTodo" />
  </div>

</template>

<script setup>
import { ref } from 'vue'
import {
  Check, Edit

} from '@element-plus/icons-vue'
import { useTodoStore } from '../store/todoStore.js' // 引入store
import { ElMessage } from 'element-plus'
const todoStore = useTodoStore() // 实例化store
const input = ref('')

const addTodo = () => {
  if (input.value.trim() === '') {
    ElMessage.error({
      message: '请输入内容',
      duration: 1500,
      offset: 100
    })
    return
  }
  let todo = {
    id: Date.now(),
    content: input.value,
    isCompleted: false,
    time: new Date().toLocaleString(),
  }
  todoStore.addTodo(todo)
  input.value = ''
  ElMessage.success({
    message: '添加成功',
    duration: 1500,
    offset: 100

  })
}
</script>

<style scoped>
div {
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  width: 100%;
}
</style>